import React, { useContext, useState } from "react";
import { Button } from "antd";

export const ThemeContext = React.createContext<string | null>(null);

// 多层次的传递
function Parent() {
  const [theme, setTheme] = useState("dark");
  const handleCLick = () => {
    setTheme("light");
  };
  return (
    <ThemeContext.Provider value={theme}>
      <Son />
      <Button type="primary" onClick={handleCLick}>
        change
      </Button>
    </ThemeContext.Provider>
  );
}

function Son() {
  return <Child />;
}

function Child() {
  const theme = useContext(ThemeContext);
  return <div>child: {theme}</div>;
}

export default Parent;
